<template>
  <div style="display: flex;">
    <div class="area">
      <img src="../../../assets/main-icon-touxiang-01.png" >
      <div id="writing">
        <div id="top">
        <ul>
          <li id="name">李杰</li>
          <li id="colr">VIP3</li>
          <li class="zi">男</li>
          <li class="zi">25</li>
          <li id="cor"><div>待接诊</div></li>
        </ul>
        </div>
        <div id="bott">
          <div class="zi">
            <p>创建时间: 2019-11-19 22:33:44</p>
          </div>
          <div class="zi">
            <p id="ends">科室:全科 医生:王冕</p>
          </div>
          <div class="zi">
            <p>手机号码: 18879867899</p>
          </div>
        </div>
        <div id="le">
          <button class="ft">接诊</button>
        </div>
        <div id="ri">
          <button class="ftr">查看患者信息</button>
        </div>
      </div>
    </div>
    <div class="area">
      <img src="../../../assets/main-icon-touxiang-01.png" >
      <div id="writing">
        <div id="top">
        <ul>
          <li id="name">李铭</li>
          <li id="colr">VIP3</li>
          <li class="zi">男</li>
          <li class="zi">25</li>
          <li id="cor"><div>待接诊</div></li>
        </ul>
        </div>
        <div id="bott">
          <div class="zi">
            <p>创建时间: 2019-11-19 22:33:44</p>
          </div>
          <div class="zi">
            <p id="ends">科室:全科 医生:王冕</p>
          </div>
          <div class="zi">
            <p>手机号码: 18879867899</p>
          </div>
        </div>
        <div id="le">
          <button class="ft">接诊</button>
        </div>
        <div id="ri">
          <button class="ftr">查看患者信息</button>
        </div>
      </div>
    </div>
    <div class="area">
      <img src="../../../assets/main-icon-touxiang-01.png" >
      <div id="writing">
        <div id="top">
        <ul>
          <li id="name">张帆</li>
          <li id="colr">VIP3</li>
          <li class="zi">男</li>
          <li class="zi">25</li>
          <li id="cor"><div>待接诊</div></li>
        </ul>
        </div>
        <div id="bott">
          <div class="zi">
            <p>创建时间: 2019-11-19 22:33:44</p>
          </div>
          <div class="zi">
            <p id="ends">科室:全科 医生:王冕</p>
          </div>
          <div class="zi">
            <p>手机号码: 18879867899</p>
          </div>
        </div>
        <div id="le">
          <button class="ft">接诊</button>
        </div>
        <div id="ri">
          <button class="ftr">查看患者信息</button>
        </div>
      </div>
    </div>
    <div class="area">
      <img src="../../../assets/main-icon-touxiang-01.png" >
      <div id="writing">
        <div id="top">
        <ul>
          <li id="name">郑轲</li>
          <li id="colr">VIP3</li>
          <li class="zi">男</li>
          <li class="zi">25</li>
          <li id="cor"><div>待接诊</div></li>
        </ul>
        </div>
        <div id="bott">
          <div class="zi">
            <p>创建时间: 2019-11-19 22:33:44</p>
          </div>
          <div class="zi">
            <p id="ends">科室:全科 医生:王冕</p>
          </div>
          <div class="zi">
            <p>手机号码: 18879867899</p>
          </div>
        </div>
        <div id="le">
          <button class="ft">接诊</button>
        </div>
        <div id="ri">
          <button class="ftr">查看患者信息</button>
        </div>
      </div>
    </div>
  </div>
  <div style="display: flex;">
    <div class="area">
      <img src="../../../assets/main-icon-touxiang-02.png" >
      <div id="writing">
        <div id="top">
        <ul>
          <li id="name">王筱</li>
          <li id="colr">VIP3</li>
          <li class="zi">女</li>
          <li class="zi">26</li>
          <li id="lu"><div>接诊中</div></li>
        </ul>
        </div>
        <div id="bott">
          <div class="zi">
            <p>创建时间: 2019-11-19 22:33:44</p>
          </div>
          <div class="zi">
            <p id="ends">科室:全科 医生:王冕</p>
          </div>
          <div class="zi">
            <p>手机号码: 18879867899</p>
          </div>
        </div>
        <div id="le">
          <button class="ft">接诊</button>
        </div>
        <div id="ri">
          <button class="ftr">查看患者信息</button>
        </div>
      </div>
    </div>
    <div class="area">
      <img src="../../../assets/main-icon-touxiang-02.png" >
      <div id="writing">
        <div id="top">
        <ul>
          <li id="name">孟玉</li>
          <li id="colr">VIP3</li>
          <li class="zi">女</li>
          <li class="zi">28</li>
          <li id="lu"><div>接诊中</div></li>
        </ul>
        </div>
        <div id="bott">
          <div class="zi">
            <p>创建时间: 2019-11-19 22:33:44</p>
          </div>
          <div class="zi">
            <p id="ends">科室:全科 医生:王冕</p>
          </div>
          <div class="zi">
            <p>手机号码: 18879867899</p>
          </div>
        </div>
        <div id="le">
          <button class="ft">接诊</button>
        </div>
        <div id="ri">
          <button class="ftr">查看患者信息</button>
        </div>
      </div>
    </div>
    <div class="area">
      <img src="../../../assets/main-icon-touxiang-02.png" >
      <div id="writing">
        <div id="top">
        <ul>
          <li id="name">周俞</li>
          <li id="colr">VIP3</li>
          <li class="zi">女</li>
          <li class="zi">25</li>
          <li id="lu"><div>接诊中</div></li>
        </ul>
        </div>
        <div id="bott">
          <div class="zi">
            <p>创建时间: 2019-11-19 22:33:44</p>
          </div>
          <div class="zi">
            <p id="ends">科室:全科 医生:王冕</p>
          </div>
          <div class="zi">
            <p>手机号码: 18879867899</p>
          </div>
        </div>
        <div id="le">
          <button class="ft">接诊</button>
        </div>
        <div id="ri">
          <button class="ftr">查看患者信息</button>
        </div>
      </div>
    </div>
    <div class="area">
      <img src="../../../assets/main-icon-touxiang-01.png" >
      <div id="writing">
        <div id="top">
        <ul>
          <li id="name">李杰</li>
          <li id="colr">VIP3</li>
          <li class="zi">男</li>
          <li class="zi">25</li>
          <li id="lu"><div>接诊中</div></li>
        </ul>
        </div>
        <div id="bott">
          <div class="zi">
            <p>创建时间: 2019-11-19 22:33:44</p>
          </div>
          <div class="zi">
            <p id="ends">科室:全科 医生:王冕</p>
          </div>
          <div class="zi">
            <p>手机号码: 18879867899</p>
          </div>
        </div>
        <div id="le">
          <button class="ft">接诊</button>
        </div>
        <div id="ri">
          <button class="ftr">查看患者信息</button>
        </div>
      </div>
    </div>
  </div>
  <div style="display: flex;">
    <div class="area">
      <img src="../../../assets/main-icon-touxiang-01.png" >
      <div id="writing">
        <div id="top">
        <ul>
          <li id="name">冷锋</li>
          <li id="colr">VIP3</li>
          <li class="zi">男</li>
          <li class="zi">25</li>
          <li id="hui"><div>已完成</div></li>
        </ul>
        </div>
        <div id="bott">
          <div class="zi">
            <p>创建时间: 2019-11-19 22:33:44</p>
          </div>
          <div class="zi">
            <p id="ends">科室:全科 医生:王冕</p>
          </div>
          <div class="zi">
            <p>手机号码: 18879867899</p>
          </div>
        </div>
        <div id="le">
          <button class="ft">接诊</button>
        </div>
        <div id="ri">
          <button class="ftr">查看患者信息</button>
        </div>
      </div>
    </div>
    <div class="area">
      <img src="../../../assets/main-icon-touxiang-01.png" >
      <div id="writing">
        <div id="top">
        <ul>
          <li id="name">林宇</li>
          <li id="colr">VIP3</li>
          <li class="zi">男</li>
          <li class="zi">25</li>
          <li id="hui"><div>已完成</div></li>
        </ul>
        </div>
        <div id="bott">
          <div class="zi">
            <p>创建时间: 2019-11-19 22:33:44</p>
          </div>
          <div class="zi">
            <p id="ends">科室:全科 医生:王冕</p>
          </div>
          <div class="zi">
            <p>手机号码: 18879867899</p>
          </div>
        </div>
        <div id="le">
          <button class="ft">接诊</button>
        </div>
        <div id="ri">
          <button class="ftr">查看患者信息</button>
        </div>
      </div>
    </div>
    <div class="area">
      <img src="../../../assets/main-icon-touxiang-01.png" >
      <div id="writing">
        <div id="top">
        <ul>
          <li id="name">萧瑟</li>
          <li id="colr">VIP3</li>
          <li class="zi">男</li>
          <li class="zi">25</li>
          <li id="hui"><div>已完成</div></li>
        </ul>
        </div>
        <div id="bott">
          <div class="zi">
            <p>创建时间: 2019-11-19 22:33:44</p>
          </div>
          <div class="zi">
            <p id="ends">科室:全科 医生:王冕</p>
          </div>
          <div class="zi">
            <p>手机号码: 18879867899</p>
          </div>
        </div>
        <div id="le">
          <button class="ft">接诊</button>
        </div>
        <div id="ri">
          <button class="ftr">查看患者信息</button>
        </div>
      </div>
    </div>
    <div class="area">
      <img src="../../../assets/main-icon-touxiang-01.png" >
      <div id="writing">
        <div id="top">
        <ul>
          <li id="name">郭靖</li>
          <li id="colr">VIP3</li>
          <li class="zi">男</li>
          <li class="zi">25</li>
          <li id="hui"><div>已完成</div></li>
        </ul>
        </div>
        <div id="bott">
          <div class="zi">
            <p>创建时间: 2019-11-19 22:33:44</p>
          </div>
          <div class="zi">
            <p id="ends">科室:全科 医生:王冕</p>
          </div>
          <div class="zi">
            <p>手机号码: 18879867899</p>
          </div>
        </div>
        <div id="le">
          <button class="ft">接诊</button>
        </div>
        <div id="ri">
          <button class="ftr">查看患者信息</button>
        </div>
      </div>
    </div>
  </div> 
  <div style="display: flex;">
    <div class="area">
      <img src="../../../assets/main-icon-touxiang-01.png" >
      <div id="writing">
        <div id="top">
        <ul>
          <li id="name">李杰</li>
          <li id="colr">VIP3</li>
          <li class="zi">男</li>
          <li class="zi">25</li>
          <li id="cor"><div>待接诊</div></li>
        </ul>
        </div>
        <div id="bott">
          <div class="zi">
            <p>创建时间: 2019-11-19 22:33:44</p>
          </div>
          <div class="zi">
            <p id="ends">科室:全科 医生:王冕</p>
          </div>
          <div class="zi">
            <p>手机号码: 18879867899</p>
          </div>
        </div>
        <div id="le">
          <button class="ft">接诊</button>
        </div>
        <div id="ri">
          <button class="ftr">查看患者信息</button>
        </div>
      </div>
    </div>
    <div class="area">
      <img src="../../../assets/main-icon-touxiang-01.png" >
      <div id="writing">
        <div id="top">
        <ul>
          <li id="name">李铭</li>
          <li id="colr">VIP3</li>
          <li class="zi">男</li>
          <li class="zi">25</li>
          <li id="cor"><div>待接诊</div></li>
        </ul>
        </div>
        <div id="bott">
          <div class="zi">
            <p>创建时间: 2019-11-19 22:33:44</p>
          </div>
          <div class="zi">
            <p id="ends">科室:全科 医生:王冕</p>
          </div>
          <div class="zi">
            <p>手机号码: 18879867899</p>
          </div>
        </div>
        <div id="le">
          <button class="ft">接诊</button>
        </div>
        <div id="ri">
          <button class="ftr">查看患者信息</button>
        </div>
      </div>
    </div>
    <div class="area">
      <img src="../../../assets/main-icon-touxiang-01.png" >
      <div id="writing">
        <div id="top">
        <ul>
          <li id="name">张帆</li>
          <li id="colr">VIP3</li>
          <li class="zi">男</li>
          <li class="zi">25</li>
          <li id="cor"><div>待接诊</div></li>
        </ul>
        </div>
        <div id="bott">
          <div class="zi">
            <p>创建时间: 2019-11-19 22:33:44</p>
          </div>
          <div class="zi">
            <p id="ends">科室:全科 医生:王冕</p>
          </div>
          <div class="zi">
            <p>手机号码: 18879867899</p>
          </div>
        </div>
        <div id="le">
          <button class="ft">接诊</button>
        </div>
        <div id="ri">
          <button class="ftr">查看患者信息</button>
        </div>
      </div>
    </div>
    <div class="area">
      <img src="../../../assets/main-icon-touxiang-01.png" >
      <div id="writing">
        <div id="top">
        <ul>
          <li id="name">郑轲</li>
          <li id="colr">VIP3</li>
          <li class="zi">男</li>
          <li class="zi">25</li>
          <li id="cor"><div>待接诊</div></li>
        </ul>
        </div>
        <div id="bott">
          <div class="zi">
            <p>创建时间: 2019-11-19 22:33:44</p>
          </div>
          <div class="zi">
            <p id="ends">科室:全科 医生:王冕</p>
          </div>
          <div class="zi">
            <p>手机号码: 18879867899</p>
          </div>
        </div>
        <div id="le">
          <button class="ft">接诊</button>
        </div>
        <div id="ri">
          <button class="ftr">查看患者信息</button>
        </div>
      </div>
    </div>
  </div>
  <div style="display: flex;">
    <div class="area">
      <img src="../../../assets/main-icon-touxiang-02.png" >
      <div id="writing">
        <div id="top">
        <ul>
          <li id="name">王筱</li>
          <li id="colr">VIP3</li>
          <li class="zi">女</li>
          <li class="zi">26</li>
          <li id="lu"><div>接诊中</div></li>
        </ul>
        </div>
        <div id="bott">
          <div class="zi">
            <p>创建时间: 2019-11-19 22:33:44</p>
          </div>
          <div class="zi">
            <p id="ends">科室:全科 医生:王冕</p>
          </div>
          <div class="zi">
            <p>手机号码: 18879867899</p>
          </div>
        </div>
        <div id="le">
          <button class="ft">接诊</button>
        </div>
        <div id="ri">
          <button class="ftr">查看患者信息</button>
        </div>
      </div>
    </div>
    <div class="area">
      <img src="../../../assets/main-icon-touxiang-02.png" >
      <div id="writing">
        <div id="top">
        <ul>
          <li id="name">孟玉</li>
          <li id="colr">VIP3</li>
          <li class="zi">女</li>
          <li class="zi">28</li>
          <li id="lu"><div>接诊中</div></li>
        </ul>
        </div>
        <div id="bott">
          <div class="zi">
            <p>创建时间: 2019-11-19 22:33:44</p>
          </div>
          <div class="zi">
            <p id="ends">科室:全科 医生:王冕</p>
          </div>
          <div class="zi">
            <p>手机号码: 18879867899</p>
          </div>
        </div>
        <div id="le">
          <button class="ft">接诊</button>
        </div>
        <div id="ri">
          <button class="ftr">查看患者信息</button>
        </div>
      </div>
    </div>
    <div class="area">
      <img src="../../../assets/main-icon-touxiang-02.png" >
      <div id="writing">
        <div id="top">
        <ul>
          <li id="name">周俞</li>
          <li id="colr">VIP3</li>
          <li class="zi">女</li>
          <li class="zi">25</li>
          <li id="lu"><div>接诊中</div></li>
        </ul>
        </div>
        <div id="bott">
          <div class="zi">
            <p>创建时间: 2019-11-19 22:33:44</p>
          </div>
          <div class="zi">
            <p id="ends">科室:全科 医生:王冕</p>
          </div>
          <div class="zi">
            <p>手机号码: 18879867899</p>
          </div>
        </div>
        <div id="le">
          <button class="ft">接诊</button>
        </div>
        <div id="ri">
          <button class="ftr">查看患者信息</button>
        </div>
      </div>
    </div>
    <div class="area">
      <img src="../../../assets/main-icon-touxiang-01.png" >
      <div id="writing">
        <div id="top">
        <ul>
          <li id="name">李杰</li>
          <li id="colr">VIP3</li>
          <li class="zi">男</li>
          <li class="zi">25</li>
          <li id="lu"><div>接诊中</div></li>
        </ul>
        </div>
        <div id="bott">
          <div class="zi">
            <p>创建时间: 2019-11-19 22:33:44</p>
          </div>
          <div class="zi">
            <p id="ends">科室:全科 医生:王冕</p>
          </div>
          <div class="zi">
            <p>手机号码: 18879867899</p>
          </div>
        </div>
        <div id="le">
          <button class="ft">接诊</button>
        </div>
        <div id="ri">
          <button class="ftr">查看患者信息</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts"> 
import { defineComponent } from 'vue'
import { UserOutlined } from '@ant-design/icons-vue';

export default defineComponent({
  components: {
    UserOutlined,
  },
  setup () {
    

    return {}
  }
})


</script>

<style scoped>
.area{
  width: 346px;
  height: 240px;
  border: 1px solid ;
  margin-top: 30px;
  margin-left: 10px;
  border-radius:10px;
}
.area img{
  margin-top: 20px;
  margin-left: 10px;
  width: 60px;
  height: 60px;
}
#writing{
  float: right;
  width: 270px;
  height: 200px;
}
#top{
  width: 260px;
  height: 50px;
  margin-top: 20px;
  margin-left: -20px;
}
#top ul li{
 float: left;
 margin-left: 20px;
line-height: 50px;
}
#bott{
  width: 260px;
  height: 100px;
  margin-top: 20px;
}
#name{
  font-family: "微软雅黑";
  font-size: 20px;
  font-weight: 700;
  color: #676767;
}
#colr{
  color:#7645f8;
  font-family: "微软雅黑";
  font-style: oblique;
  font-size: 14px;
}
.zi{
 color:#868686;
 font-family: "微软雅黑Bold-12-平滑";
}
#cor{
  width: 58px;
  height: 20px;
  margin-top: 15px;
  background-color: #FF6262;
  border-radius:30px;
}
#cor div{
  margin-top: -15px;
  margin-left: 8px;
  color:#fff;
  font-size: 13px;
}
#lu{
  width: 58px;
  height: 20px;
  margin-top: 15px;
  background-color: #28D094;
  border-radius:30px;
}
#lu div{
  margin-top: -15px;
  margin-left: 8px;
  color:#fff;
  font-size: 13px;
}
#hui{
  width: 58px;
  height: 20px;
  margin-top: 15px;
  background-color: #CCCCCC;
  border-radius:30px;
}
#hui div{
  margin-top: -15px;
  margin-left: 8px;
  color:#fff;
  font-size: 13px;
}
#le{
  width: 181px;
  height: 45px;
  margin-left: -71px;
  margin-top: 5px;
 
}
#ri{
  width: 170px;
  height: 45px;
  margin-left: 99px;
  margin-top: -45px;
  border-bottom-left-radius: 10px;
}
.ft{
  width: 171px;
  height: 45px;
  color:#9297ec;
  border-bottom-left-radius: 10px;
}
.ftr{
  width: 171px;
  height: 45px;
  border-bottom-right-radius: 10px;
  background-color: #9297ec;
}
</style>